<template>
	<view class="browse-wrap">
		<!-- nav Bar -->
		<view class="nav-bar-wrap">
			<my-mainPage-navbar title="Push" icon="iconsousuo"></my-mainPage-navbar>
		</view>
		
		
		<!-- content -->
		<view class="content-wrap">
			<view class="nav-text">Recommend  &nbsp;&nbsp;artists</view>
			<view class="swiper-box">
				<swiper class="swiper" :current="swiperCurrent" :indicator-dots="false" :autoplay="true" :interval="5000" :duration="200" @change="swiperChange">
					<swiper-item v-for="(item, index) in swiperImglist" :key="item.id">
						<view class="swiper-item">
							<image :src="item.img" class="switch_img"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="swiper-dot-box">
				<view class="swiper-dot-list">
					<view class="dot-item" v-for="(val, idx) in swiperImglist" :key="val.id" @click="dotChange(idx)"> </view>
					<view  class="active-dot" :style="{'transform': activeDotTrans}"> </view>
				</view>
			</view>
			<my-mainPage-navbar title="New Song" icon="iconyoujiantou" :customText="customText" :customIcon="customIcon" :rightButton="false"></my-mainPage-navbar>
			<view class="new-song-list">
				<view class="new-song-item" v-for="(item, index) in newSongList" :key="item.id">
					<view class="img-box">
						<image class="img" :src="item.img"></image>
					</view>
					<view class="text-box">
						<text class="mainTitle">{{ item.mainTitle }}</text>
						<text class="subtitle">{{ item.subtitle }}</text>
					</view>
					<view class="action-box">
						<my-button>
							<view class="btn-content">
								<text :class="['icon','iconfont', 'iconbofang', 'defaultIcon']"></text>
							</view>
						</my-button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				swiperCurrent: 0,
				swiperImglist:[
					{
						id:1,
						img:'../../static/images/switch_1.jpg',
					},
					{
						id:2,
						img:'../../static/images/switch_2.jpg',
					},
					{
						id:3,
						img:'../../static/images/switch_3.jpg',
					},
					{
						id:4,
						img:'../../static/images/switch_4.jpg',
					}
				],
				
				customText:{
					'fontSize': '32rpx',
					'margin-left': '20rpx'
				},
				
				customIcon:{
					'fontSize': '36rpx',
					'font-weight': 'bold',
					'width': '70rpx',
					'text-align': 'center'
				},
				
				newSongList:[
					{
						id: 1,
						mainTitle:'Stupid Love',
						subtitle:'Lady Gaga',
						img:'../../static/images/profile_photo_2.jpg'
					},
					{
						id: 2,
						mainTitle:'Only The Young',
						subtitle:'Taylor Swlfi',
						img:'../../static/images/profile_photo_3.jpg'
					},
					{
						id: 3,
						mainTitle:'No Time To Die',
						subtitle:'Bilne Eilsh',
						img:'../../static/images/profile_photo_4.jpg'
					},
				]
			}
		},
		computed:{
			activeDotTrans(){
				return `translateX(${this.swiperCurrent * 50}rpx)`;
			}
		},
		methods: {
			dotChange(index){
				this.swiperCurrent = index;
			},
			
			swiperChange(e){
				this.swiperCurrent = e.detail.current;
			},
		}
	}
	
</script>

<style lang="scss" scoped>
	.browse-wrap{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		.content-wrap{
			flex: 1;
			display: flex;
			flex-direction: column;
			
			.nav-text{
				color: $my-app-primary-color;
			}
			
			.swiper-box{
				margin-top: 30rpx;
				border-radius: 30rpx;
				.swiper-item{
					height: 100%;
					border-radius: 30rpx;
					.switch_img{
						width: 100%;
						height: 100%;
						border-radius: 30rpx;
					}
				}
			}
			.swiper-dot-box{
				display: flex;
				justify-content: center;
				margin-top: 20rpx;
				margin-bottom: 20rpx;
				.swiper-dot-list{
					display: flex;
					position: relative;
					
					.dot-item{
						display: inline-block;
						width: 20rpx;
						height: 20rpx;
						border-radius: 50%;
						background: $my-app-bg-color;
						margin-right: 30rpx;
						box-shadow: inset 10rpx 10rpx 15rpx #dee0e2, 
						            inset -8rpx -8rpx 20rpx #ffffff;
					}
					
					.active-dot{
						width: 50rpx;
						height: 20rpx;
						border-radius: 20rpx;
						background: $my-app-primary-color;
						position: absolute;
						left: -15rpx;
						transition: all .2s ease-in; 
						// left: 55rpx;
						// left: 125rpx;
						// left: 195rpx;
					}
				}
			}
			.new-song-list{
				flex: 1;
				overflow-y: auto;
				.new-song-item{
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 50rpx;
					padding: 20rpx 20rpx;
					.img-box{
						width: 120rpx;
						height: 120rpx;
						border-radius: 20rpx;
						background: #F1F3F6;
						box-shadow:  5px 5px 10px #b5b6b9, 
						             -5px -5px 10px rgba(255, 255, 255, .7);
						.img{
							 width: 100%;
							 height: 100%;
							 border-radius: 20rpx;
						}
						 
					}
					.text-box{
						flex: 1;
						 display: flex;
						 flex-direction: column;
						 padding: 0 30rpx;
						 .mainTitle{
							 font-size: 40rpx;
							 color: $my-app-primary-color;
						 }
						 
						 .subtitle{
							 font-size: 24rpx;
							 color: $my-app-default-color;
						 }
					}
					.action-box{
						.btn-content{
							display: flex;
							justify-content: center;
							align-items: center;
							padding: 16rpx 24rpx;
							.defaultIcon{
								font-size: 28rpx;
								color: $my-app-primary-color;
							}	
						}
					}
				}
			}
		}
	}

</style>
